<template>
  <view class="company-photos-container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">添加公司照片</text>
      <text class="description">在公司主页展示亮眼的照片或视频，体验企业气氛魅力，最多上传20张哦！</text>
    </view>

	<!-- 照片上传区域 -->
	<view class="upload-section">
	  <view class="upload-area" @click="uploadPhotos">
	    <text v-if="photos.length === 0">点击上传照片</text>
	    <view v-else class="photo-list">
	      <view
	        class="photo-item"
	        v-for="(photo, index) in photos"
	        :key="index"
	      >
	        <image :src="photo" mode="aspectFill" class="photo"></image>
	        <view class="delete-icon" @click.stop="deletePhoto(index)">
	          <uni-icons type="clear" size="16" color="#FF4D4F"></uni-icons>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>

    <!-- 注意事项 -->
    <view class="notes-section">
      <text class="notes-title">注意事项</text>
      <view class="note-item">
        <text>1. 请上传清晰且完整的图片</text>
      </view>
      <view class="note-item">
        <text>2. 请上传与品牌相关的图片，含有其他无关内容将无法通过审核（包括但不限于含无关水印、招聘信息、联系方式、二维码等）</text>
      </view>
      <view class="note-item">
        <text>3. 上传图片须符合中国相关法律法规，不得含有违法内容或不良信息</text>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button-container">
      <button class="save-button" @click="savePhotos">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photos: [], // 上传的照片列表
    };
  },
  methods: {
    // 上传照片
    uploadPhotos() {
      if (this.photos.length >= 20) {
        uni.showToast({
          title: "最多上传20张照片",
          icon: "none",
        });
        return;
      }

      uni.chooseImage({
        count: 20 - this.photos.length, // 最多上传20张
        sizeType: ["compressed"], // 压缩图片
        sourceType: ["album", "camera"], // 从相册或相机选择
        success: (res) => {
          this.photos = [...this.photos, ...res.tempFilePaths];
        },
        fail: (err) => {
          uni.showToast({
            title: "上传失败，请重试",
            icon: "none",
          });
        },
      });
    },
    // 删除照片
    deletePhoto(index) {
      this.photos.splice(index, 1);
    },
    // 保存照片
    savePhotos() {
      if (this.photos.length === 0) {
        uni.showToast({
          title: "请上传至少一张照片",
          icon: "none",
        });
        return;
      }

      // 返回上一页并传递数据
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit("updateCompanyPhotos", this.photos);

      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.company-photos-container {
  padding: 20px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #151515;
  display: block;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  color: #666;
}

.notes-section {
  margin-bottom: 20px;
}

.notes-title {
  font-size: 16px;
  color: #151515;
  display: block;
  margin-bottom: 10px;
}

.note-item {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.upload-section {
  margin-bottom: 20px; 
}

.upload-area {
  width: 110px;
  height: 100px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #999;
  font-size: 10px;
}

.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-item {
  width: calc((100% - 20px) / 3); /* 每行显示3张照片 */
  position: relative;
}

.photo {
  width: 100%;
  height: 100px;
  border-radius: 8px;
}

.delete-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
}

.save-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 20px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.save-button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  border-radius: 32px;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
}
</style>